<template>
    <div class="publish">
        <a-row class="row">
            <a-col :span="18" :push="6" class="col-1">
                <!-- 富文本 -->
                <div class="text-area">
                    <div>
                        <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 720px; overflow-y: hidden;" v-model="valueHtml"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </div>
            </a-col>
            <a-col :span="6" :pull="18" class="col-2">
                <a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish"
                    @finishFailed="onFinishFailed">
                    <a-form-item name="fileList" :rules="[{ required: true, message: '请上传封面!' }]">
                        <div class="box">
                            <div v-if="formState.fileList.length < 1">
                                <a-upload v-model:file-list="formState.fileList"
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :maxCount="1"
                                    list-type="picture" @change="handlePreview" class="upload-list-inline">
                                    <plus-outlined style="font-size: 30px; color: #f5e7d9;" />
                                </a-upload>
                            </div>
                            <div v-else>
                                <a-image width="100%" height="350px" :src="previewImage" class="previewImg" />
                                <br />
                                <a-button class="handleCancel" @click="handleCancel">移除</a-button>
                            </div>
                        </div>
                    </a-form-item>

                    <a-form-item name="title" :rules="[{ required: true, message: '请输入标题!' }]">
                        <a-textarea v-model:value="valueTitle" placeholder="请输入标题" auto-size :bordered="false"
                            class="title-input" />
                    </a-form-item>

                    <div>
                        <a-row>
                            <a-col :span="4" v-for="(item, index) in options" :key="index">
                                <a-form-item>
                                    <a-checkbox class="tag" :style="{ color: item.color }">{{ item.label }}</a-checkbox>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </div>
                    <a-form-item>
                        <a-button type="primary" html-type="submit" class="btn sub">发布</a-button>
                        <a-button type="primary" class="btn yl" @click="showModal">预览</a-button>
                    </a-form-item>
                </a-form>
                <div class="preview-box">
                    <a-modal v-model:open="open" :title="valueTitle === '' ? '预览' : valueTitle" @ok="handleOk"
                        width="100%" wrap-class-name="full-modal" :footer="null">
                        <div v-html="valueHtml"></div>
                    </a-modal>
                </div>
            </a-col>
        </a-row>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount, shallowRef } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { getBase64 } from '../../utils/index';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { dictList } from '../../api/dict/dict';


const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');

const handleCancel = () => {
    previewVisible.value = false;
    previewTitle.value = '';
    formState.fileList = [];
};

const handlePreview = (files: any) => {
    if (files.fileList.length > 0) {
        getBase64(files.file.originFileObj).then((image: string) => {
            previewImage.value = image;
        });
    }
    previewVisible.value = true;
};

//文章标题
const valueTitle = ref<string>('');
interface FormState {
    fileList: any;
    password: string;
    remember: boolean;
}

const formState = reactive<FormState>({
    fileList: [],
    password: '',
    remember: true,
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
//标签选项
const options = reactive<any>([])
//预览box
const open = ref(false);
const showModal = () => {
    open.value = true;
};

const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};

//富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const mode = ref('default')

// 模拟 ajax 异步获取内容
//标签

onMounted(() => {
    setTimeout(() => {
        valueHtml.value = ''
    }, 1500)

    //获取标签列表
    dictList({}).then((res: any) => {
        if (res.code === 200) {
            res.data.forEach((item: any) => {
                options.push({
                    id: item.dictId,
                    label: item.dictDesc,
                    value: item.dictValue,
                    color: '#5D1F1F'
                })
            })
        }
    }).catch((err: any) => {
        console.error(err)
    })
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

//工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {}

const editorConfig = ref({
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            server: '', // 设置为空或undefined，表示不上传服务器
            // 设置base64保存图片的大小限制，单位字节，例如：5 * 1024 * 1024 表示 20MB
            base64LimitSize: 20 * 1024 * 1024,
            // 上传图片时是否展示为base64格式
            showBase64: true,
        },
    },
})


const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    //删除工具栏菜单
    toolbarConfig.excludeKeys = [
        'group-more-style', 'blockquote', 'group-video', 'todo', 'headerSelect', 'fullScreen', 'lineHeight',
        'fontFamily', 'group-indent', 'numberedList', 'bulletedList', 'group-justify', 'insertLink', 'insertTable', 'bgColor',
        'underline', 'italic'
    ]
}
</script>
<style lang="scss" scoped>
.publish {
    background-color: #f9f8f7;
    height: 100%;
    padding-top: 20px;

    .row {
        height: 720px;

        .col-1,
        .col-2 {
            padding: 30px 40px;
        }

        .col-2 {
            text-align: center;

            .box {
                height: 400px;

                :deep(.ant-upload-select) {
                    border: 2px solid #f5e7d9 !important;
                    width: 100%;
                    height: 350px;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 6px;

                    .ant-upload {
                        height: 350px;
                        display: block;
                        line-height: 350px;
                    }
                }

                .handleCancel {
                    border: none;
                    border-bottom: 1px solid rgba(241, 64, 75, .9);
                    color: rgba(241, 64, 75, .9);
                    width: 100%;
                    margin-top: 5px;
                    border-radius: 0;
                    background: transparent;
                    transition: all 0.7s;
                    font-weight: 600;

                    &:hover {
                        background: rgba(241, 64, 75, .9);
                        color: #fff;
                    }

                }
            }

            .title-input {
                border-bottom: 2px solid #f5e7d9;
                border-radius: 0;
                margin-top: 30px;
                margin-bottom: 40px;
            }

            .tag {
                width: 90px;
                margin: 10px 0;
            }

            .btn {
                width: 40%;
                margin: 30px 5%;
                font-weight: 700;
                transition: all 0.7s;
            }

            .sub {
                background-color: rgba(241, 64, 75, .9);
                color: #fff;

                &:hover {
                    background-color: rgba(241, 64, 75, .7);
                }
            }

            .yl {
                background-color: transparent;
                color: rgba(241, 64, 75, .9);
                border: 1px solid rgba(241, 64, 75, .9);

                &:hover {
                    border: 1px solid rgba(241, 64, 75, .7);
                    color: rgba(241, 64, 75, .7);
                }
            }

            :deep(.ant-form-item-explain-error) {
                margin-top: -30px !important;
                text-align: left !important;
            }

        }
    }
}
</style>
<style lang="scss">
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}

.w-e-toolbar {
    justify-content: center;
    border: none;
    padding: 10px;
    background-color: #f9f8f7;
    border-left: 2px solid #f5e7d9;
}

#w-e-textarea-1,
.w-e-scroll {
    background-color: #f9f8f7;
    border-left: 1px solid #f5e7d9;
}
</style>